import React, { useState } from 'react';
import { 
  Code, 
  Database, 
  GitBranch, 
  Settings, 
  Shield, 
  AlertTriangle,
  CheckCircle,
  Clock,
  Zap,
  FileText,
  Server,
  Workflow,
  Bug,
  TestTube,
  Layers,
  ArrowRight,
  ArrowDown,
  Info,
  ExternalLink,
  Calendar
} from 'lucide-react';

export default function DevelopmentGuide() {
  const [activeTab, setActiveTab] = useState('architecture');
  const [expandedSection, setExpandedSection] = useState(null);

  const tabs = [
    { id: 'architecture', name: '技术架构', icon: Layers },
    { id: 'api', name: 'API设计', icon: Server },
    { id: 'dataflow', name: '数据流设计', icon: GitBranch },
    { id: 'logic', name: '业务逻辑', icon: Code },
    { id: 'exception', name: '异常处理', icon: AlertTriangle },
    { id: 'testing', name: '测试策略', icon: TestTube },
    { id: 'deployment', name: '部署运维', icon: Settings }
  ];

  const toggleSection = (sectionId) => {
    setExpandedSection(expandedSection === sectionId ? null : sectionId);
  };

  const renderArchitecture = () => (
    <div className="space-y-8">
      {/* 系统架构总览 */}
      <div className="bg-white rounded-lg shadow-sm p-6">
        <h2 className="text-xl font-bold text-gray-800 mb-6">系统架构总览</h2>
        
        {/* 技术栈选择 */}
        <div className="mb-8">
          <h3 className="text-lg font-semibold text-gray-700 mb-4">技术栈选择与说明</h3>
          <div className="grid md:grid-cols-2 gap-6">
            <div className="border border-gray-200 rounded-lg p-4">
              <h4 className="font-medium text-gray-800 mb-3">后端技术栈</h4>
              <div className="space-y-3">
                <div className="flex items-center justify-between">
                  <span className="text-sm text-gray-600">Framework</span>
                  <span className="px-2 py-1 bg-green-100 text-green-800 rounded text-sm">Spring Boot 3.2</span>
                </div>
                <div className="flex items-center justify-between">
                  <span className="text-sm text-gray-600">Database</span>
                  <span className="px-2 py-1 bg-blue-100 text-blue-800 rounded text-sm">PostgreSQL 15</span>
                </div>
                <div className="flex items-center justify-between">
                  <span className="text-sm text-gray-600">Cache</span>
                  <span className="px-2 py-1 bg-red-100 text-red-800 rounded text-sm">Redis 7.0</span>
                </div>
                <div className="flex items-center justify-between">
                  <span className="text-sm text-gray-600">Message Queue</span>
                  <span className="px-2 py-1 bg-purple-100 text-purple-800 rounded text-sm">Apache Kafka</span>
                </div>
                <div className="flex items-center justify-between">
                  <span className="text-sm text-gray-600">AI/ML</span>
                  <span className="px-2 py-1 bg-orange-100 text-orange-800 rounded text-sm">Python + FastAPI</span>
                </div>
              </div>
              <div className="mt-4 p-3 bg-blue-50 rounded-lg">
                <p className="text-sm text-blue-800">
                  <strong>选择理由：</strong> Spring Boot提供企业级稳定性，PostgreSQL支持JSON和时序数据，
                  Kafka保证数据处理的可靠性和扩展性。
                </p>
              </div>
            </div>

            <div className="border border-gray-200 rounded-lg p-4">
              <h4 className="font-medium text-gray-800 mb-3">前端技术栈</h4>
              <div className="space-y-3">
                <div className="flex items-center justify-between">
                  <span className="text-sm text-gray-600">Framework</span>
                  <span className="px-2 py-1 bg-blue-100 text-blue-800 rounded text-sm">React 18 + TypeScript</span>
                </div>
                <div className="flex items-center justify-between">
                  <span className="text-sm text-gray-600">State Management</span>
                  <span className="px-2 py-1 bg-purple-100 text-purple-800 rounded text-sm">Redux Toolkit</span>
                </div>
                <div className="flex items-center justify-between">
                  <span className="text-sm text-gray-600">UI Components</span>
                  <span className="px-2 py-1 bg-green-100 text-green-800 rounded text-sm">Ant Design</span>
                </div>
                <div className="flex items-center justify-between">
                  <span className="text-sm text-gray-600">Charts</span>
                  <span className="px-2 py-1 bg-orange-100 text-orange-800 rounded text-sm">ECharts</span>
                </div>
                <div className="flex items-center justify-between">
                  <span className="text-sm text-gray-600">Build Tool</span>
                  <span className="px-2 py-1 bg-gray-100 text-gray-800 rounded text-sm">Vite</span>
                </div>
              </div>
              <div className="mt-4 p-3 bg-green-50 rounded-lg">
                <p className="text-sm text-green-800">
                  <strong>选择理由：</strong> React生态成熟，TypeScript提供类型安全，
                  Ant Design减少UI开发工作量，ECharts支持复杂的数据可视化。
                </p>
              </div>
            </div>
          </div>
        </div>

        {/* 微服务架构设计 */}
        <div className="mb-8">
          <h3 className="text-lg font-semibold text-gray-700 mb-4">微服务架构设计</h3>
          <div className="space-y-4">
            {[
              {
                name: 'esg-gateway',
                description: 'API网关服务',
                port: '8080',
                responsibilities: ['路由转发', '认证鉴权', '限流熔断', '监控日志'],
                tech: 'Spring Cloud Gateway'
              },
              {
                name: 'esg-user-service',
                description: '用户管理服务',
                port: '8081',
                responsibilities: ['用户注册登录', '权限管理', '组织架构', '角色配置'],
                tech: 'Spring Boot + Spring Security'
              },
              {
                name: 'esg-data-service',
                description: '数据管理服务',
                port: '8082',
                responsibilities: ['数据采集', '数据清洗', '数据存储', '数据同步'],
                tech: 'Spring Boot + Apache Airflow'
              },
              {
                name: 'esg-calculation-service',
                description: '计算引擎服务',
                port: '8083',
                responsibilities: ['碳排放计算', '水足迹计算', '指标聚合', '基准对比'],
                tech: 'Spring Boot + Apache Spark'
              },
              {
                name: 'esg-ai-service',
                description: 'AI智能服务',
                port: '8084',
                responsibilities: ['OCR识别', '风险预测', '智能推荐', '异常检测'],
                tech: 'FastAPI + TensorFlow'
              },
              {
                name: 'esg-report-service',
                description: '报告生成服务',
                port: '8085',
                responsibilities: ['报告模板', '自动生成', '格式转换', '分发推送'],
                tech: 'Spring Boot + Apache POI'
              }
            ].map((service, idx) => (
              <div key={idx} className="border border-gray-200 rounded-lg p-4">
                <div className="flex items-center justify-between mb-3">
                  <h4 className="font-medium text-gray-800">{service.name}</h4>
                  <div className="flex items-center space-x-2">
                    <span className="px-2 py-1 bg-blue-100 text-blue-800 rounded text-sm">:{service.port}</span>
                    <span className="px-2 py-1 bg-green-100 text-green-800 rounded text-sm">{service.tech}</span>
                  </div>
                </div>
                <p className="text-sm text-gray-600 mb-3">{service.description}</p>
                <div className="flex flex-wrap gap-2">
                  {service.responsibilities.map((resp, respIdx) => (
                    <span key={respIdx} className="px-2 py-1 bg-gray-100 text-gray-700 rounded text-xs">
                      {resp}
                    </span>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* 数据库设计 */}
        <div>
          <h3 className="text-lg font-semibold text-gray-700 mb-4">数据库设计原则</h3>
          <div className="grid md:grid-cols-2 gap-6">
            <div className="border border-gray-200 rounded-lg p-4">
              <h4 className="font-medium text-gray-800 mb-3">分库分表策略</h4>
              <ul className="text-sm text-gray-600 space-y-2">
                <li>• <strong>组织维度分库：</strong> 按company_code进行分库</li>
                <li>• <strong>时间维度分表：</strong> 活动数据按年月分表</li>
                <li>• <strong>读写分离：</strong> 主库写入，从库查询</li>
                <li>• <strong>冷热分离：</strong> 历史数据归档到时序数据库</li>
              </ul>
            </div>
            <div className="border border-gray-200 rounded-lg p-4">
              <h4 className="font-medium text-gray-800 mb-3">索引设计原则</h4>
              <ul className="text-sm text-gray-600 space-y-2">
                <li>• <strong>复合索引：</strong> company_code + period_start</li>
                <li>• <strong>唯一索引：</strong> 各种code字段的唯一性</li>
                <li>• <strong>部分索引：</strong> 活跃数据的条件索引</li>
                <li>• <strong>表达式索引：</strong> 计算字段的函数索引</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  );

  const renderAPI = () => (
    <div className="space-y-8">
      {/* API设计规范 */}
      <div className="bg-white rounded-lg shadow-sm p-6">
        <h2 className="text-xl font-bold text-gray-800 mb-6">API设计规范</h2>
        
        {/* RESTful设计原则 */}
        <div className="mb-8">
          <h3 className="text-lg font-semibold text-gray-700 mb-4">RESTful设计原则</h3>
          <div className="space-y-4">
            <div className="border border-gray-200 rounded-lg p-4">
              <h4 className="font-medium text-gray-800 mb-3">URL命名规范</h4>
              <div className="space-y-2 text-sm">
                <div className="flex items-center justify-between">
                  <code className="bg-gray-100 px-2 py-1 rounded">GET /api/v1/organizations</code>
                  <span className="text-gray-600">获取组织列表</span>
                </div>
                <div className="flex items-center justify-between">
                  <code className="bg-gray-100 px-2 py-1 rounded">POST /api/v1/organizations</code>
                  <span className="text-gray-600">创建组织</span>
                </div>
                <div className="flex items-center justify-between">
                  <code className="bg-gray-100 px-2 py-1 rounded">PUT /api/v1/organizations/{'{id}'}</code>
                  <span className="text-gray-600">更新组织</span>
                </div>
                <div className="flex items-center justify-between">
                  <code className="bg-gray-100 px-2 py-1 rounded">DELETE /api/v1/organizations/{'{id}'}</code>
                  <span className="text-gray-600">删除组织</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* 核心API详细设计 */}
        <div className="mb-8">
          <h3 className="text-lg font-semibold text-gray-700 mb-4">核心API详细设计</h3>
          
          {/* 数据采集API */}
          <div className="mb-6">
            <button
              onClick={() => toggleSection('data-collection-api')}
              className="w-full flex items-center justify-between p-4 bg-blue-50 rounded-lg hover:bg-blue-100 transition-colors"
            >
              <h4 className="font-medium text-blue-800">数据采集API</h4>
              {expandedSection === 'data-collection-api' ? <ArrowDown /> : <ArrowRight />}
            </button>
            
            {expandedSection === 'data-collection-api' && (
              <div className="mt-4 border border-gray-200 rounded-lg p-4">
                <div className="space-y-4">
                  <div>
                    <h5 className="font-medium text-gray-800 mb-2">POST /api/v1/data/activities/batch</h5>
                    <p className="text-sm text-gray-600 mb-3">批量导入活动数据</p>
                    
                    <div className="space-y-3">
                      <div>
                        <h6 className="text-sm font-medium text-gray-700">请求参数：</h6>
                        <pre className="bg-gray-100 p-3 rounded text-xs overflow-x-auto">
{`{
  "company_code": "string",
  "reporting_period": "2024-01",
  "activities": [
    {
      "activity_type": "ELECTRICITY_CONSUMPTION",
      "activity_value": 1000.5,
      "activity_unit": "kWh",
      "facility_code": "FAC001",
      "data_source": "ERP_SYSTEM",
      "confidence_score": 95
    }
  ]
}`}
                        </pre>
                      </div>
                      
                      <div>
                        <h6 className="text-sm font-medium text-gray-700">响应示例：</h6>
                        <pre className="bg-gray-100 p-3 rounded text-xs overflow-x-auto">
{`{
  "success": true,
  "data": {
    "batch_id": "batch_20240315_001",
    "total_count": 1,
    "success_count": 1,
    "failed_count": 0,
    "validation_errors": []
  }
}`}
                        </pre>
                      </div>
                      
                      <div>
                        <h6 className="text-sm font-medium text-gray-700">业务逻辑：</h6>
                        <ul className="text-sm text-gray-600 space-y-1">
                          <li>1. 验证company_code是否存在</li>
                          <li>2. 检查reporting_period格式</li>
                          <li>3. 验证activity_type是否在枚举范围内</li>
                          <li>4. 单位转换和标准化</li>
                          <li>5. 数据质量评分</li>
                          <li>6. 异步处理和入库</li>
                        </ul>
                      </div>
                      
                      <div>
                        <h6 className="text-sm font-medium text-gray-700">异常处理：</h6>
                        <ul className="text-sm text-red-600 space-y-1">
                          <li>• 400: 参数格式错误</li>
                          <li>• 403: 无权限访问该组织数据</li>
                          <li>• 409: 数据重复冲突</li>
                          <li>• 422: 数据验证失败</li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            )}
          </div>

          {/* 计算引擎API */}
          <div className="mb-6">
            <button
              onClick={() => toggleSection('calculation-api')}
              className="w-full flex items-center justify-between p-4 bg-green-50 rounded-lg hover:bg-green-100 transition-colors"
            >
              <h4 className="font-medium text-green-800">计算引擎API</h4>
              {expandedSection === 'calculation-api' ? <ArrowDown /> : <ArrowRight />}
            </button>
            
            {expandedSection === 'calculation-api' && (
              <div className="mt-4 border border-gray-200 rounded-lg p-4">
                <div className="space-y-4">
                  <div>
                    <h5 className="font-medium text-gray-800 mb-2">POST /api/v1/calculations/carbon-footprint</h5>
                    <p className="text-sm text-gray-600 mb-3">触发碳足迹计算</p>
                    
                    <div className="space-y-3">
                      <div>
                        <h6 className="text-sm font-medium text-gray-700">请求参数：</h6>
                        <pre className="bg-gray-100 p-3 rounded text-xs overflow-x-auto">
{`{
  "calculation_type": "ORGANIZATION_INVENTORY",
  "company_code": "COMP001",
  "reporting_period": "2024-01",
  "scope_types": ["SCOPE1", "SCOPE2", "SCOPE3"],
  "calculation_method": "GHG_PROTOCOL",
  "include_biogenic": false
}`}
                        </pre>
                      </div>
                      
                      <div>
                        <h6 className="text-sm font-medium text-gray-700">计算逻辑：</h6>
                        <ol className="text-sm text-gray-600 space-y-1">
                          <li>1. 获取指定期间的所有活动数据</li>
                          <li>2. 根据activity_type匹配排放因子</li>
                          <li>3. 按地理位置和时间筛选最佳因子</li>
                          <li>4. 执行计算: 活动数据 × 排放因子</li>
                          <li>5. 按Scope分类聚合结果</li>
                          <li>6. 数据质量评估和置信度计算</li>
                          <li>7. 结果存储和缓存</li>
                        </ol>
                      </div>
                      
                      <div>
                        <h6 className="text-sm font-medium text-gray-700">异步任务状态：</h6>
                        <div className="flex flex-wrap gap-2">
                          <span className="px-2 py-1 bg-yellow-100 text-yellow-800 rounded text-xs">PENDING</span>
                          <span className="px-2 py-1 bg-blue-100 text-blue-800 rounded text-xs">PROCESSING</span>
                          <span className="px-2 py-1 bg-green-100 text-green-800 rounded text-xs">COMPLETED</span>
                          <span className="px-2 py-1 bg-red-100 text-red-800 rounded text-xs">FAILED</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            )}
          </div>
        </div>

        {/* 错误代码规范 */}
        <div>
          <h3 className="text-lg font-semibold text-gray-700 mb-4">错误代码规范</h3>
          <div className="grid md:grid-cols-2 gap-6">
            <div className="border border-gray-200 rounded-lg p-4">
              <h4 className="font-medium text-gray-800 mb-3">HTTP状态码</h4>
              <div className="space-y-2 text-sm">
                <div className="flex items-center justify-between">
                  <span className="text-green-600">200</span>
                  <span className="text-gray-600">请求成功</span>
                </div>
                <div className="flex items-center justify-between">
                  <span className="text-blue-600">201</span>
                  <span className="text-gray-600">资源创建成功</span>
                </div>
                <div className="flex items-center justify-between">
                  <span className="text-red-600">400</span>
                  <span className="text-gray-600">参数错误</span>
                </div>
                <div className="flex items-center justify-between">
                  <span className="text-red-600">401</span>
                  <span className="text-gray-600">未授权</span>
                </div>
                <div className="flex items-center justify-between">
                  <span className="text-red-600">403</span>
                  <span className="text-gray-600">权限不足</span>
                </div>
                <div className="flex items-center justify-between">
                  <span className="text-red-600">500</span>
                  <span className="text-gray-600">服务器错误</span>
                </div>
              </div>
            </div>
            
            <div className="border border-gray-200 rounded-lg p-4">
              <h4 className="font-medium text-gray-800 mb-3">业务错误码</h4>
              <div className="space-y-2 text-sm">
                <div className="flex items-center justify-between">
                  <span className="text-red-600">ESG_001</span>
                  <span className="text-gray-600">组织不存在</span>
                </div>
                <div className="flex items-center justify-between">
                  <span className="text-red-600">ESG_002</span>
                  <span className="text-gray-600">数据重复</span>
                </div>
                <div className="flex items-center justify-between">
                  <span className="text-red-600">ESG_003</span>
                  <span className="text-gray-600">排放因子未找到</span>
                </div>
                <div className="flex items-center justify-between">
                  <span className="text-red-600">ESG_004</span>
                  <span className="text-gray-600">计算任务失败</span>
                </div>
                <div className="flex items-center justify-between">
                  <span className="text-red-600">ESG_005</span>
                  <span className="text-gray-600">报告生成失败</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );

  const renderDataFlow = () => (
    <div className="space-y-8">
      {/* 数据流总览 */}
      <div className="bg-white rounded-lg shadow-sm p-6">
        <h2 className="text-xl font-bold text-gray-800 mb-6">数据流设计</h2>
        
        {/* 实时数据流 */}
        <div className="mb-8">
          <h3 className="text-lg font-semibold text-gray-700 mb-4">实时数据处理流程</h3>
          <div className="bg-gray-50 rounded-lg p-6">
            <div className="flex items-center justify-between mb-4">
              <span className="text-sm font-medium text-gray-700">数据源</span>
              <ArrowRight className="w-4 h-4 text-gray-400" />
              <span className="text-sm font-medium text-gray-700">数据采集</span>
              <ArrowRight className="w-4 h-4 text-gray-400" />
              <span className="text-sm font-medium text-gray-700">数据清洗</span>
              <ArrowRight className="w-4 h-4 text-gray-400" />
              <span className="text-sm font-medium text-gray-700">数据存储</span>
              <ArrowRight className="w-4 h-4 text-gray-400" />
              <span className="text-sm font-medium text-gray-700">数据计算</span>
            </div>
            
            <div className="space-y-4">
              <div className="border border-gray-200 rounded-lg p-4">
                <h4 className="font-medium text-gray-800 mb-3">1. 数据采集层</h4>
                <ul className="text-sm text-gray-600 space-y-1">
                  <li>• <strong>ERP系统连接器：</strong> 通过API或数据库连接获取生产数据</li>
                  <li>• <strong>IoT设备接入：</strong> 通过MQTT协议接收传感器数据</li>
                  <li>• <strong>文件上传处理：</strong> 解析Excel、CSV、PDF等格式文件</li>
                  <li>• <strong>第三方API：</strong> 从供应商平台获取ESG数据</li>
                </ul>
                <div className="mt-3 p-3 bg-yellow-50 rounded-lg">
                  <p className="text-sm text-yellow-800">
                    <strong>技术实现：</strong> 使用Apache Kafka作为消息队列，确保数据传输的可靠性和顺序性
                  </p>
                </div>
              </div>
              
              <div className="border border-gray-200 rounded-lg p-4">
                <h4 className="font-medium text-gray-800 mb-3">2. 数据清洗层</h4>
                <ul className="text-sm text-gray-600 space-y-1">
                  <li>• <strong>数据验证：</strong> 格式检查、数据类型验证、业务规则校验</li>
                  <li>• <strong>单位转换：</strong> 统一度量单位（如kWh转换为MWh）</li>
                  <li>• <strong>异常检测：</strong> 使用AI模型识别异常值和离群点</li>
                  <li>• <strong>数据填补：</strong> 基于历史数据和机器学习进行缺失值填补</li>
                </ul>
                <div className="mt-3 p-3 bg-blue-50 rounded-lg">
                  <p className="text-sm text-blue-800">
                    <strong>质量评分：</strong> 为每条数据生成0-100的质量评分，包含完整性、准确性、及时性评估
                  </p>
                </div>
              </div>
              
              <div className="border border-gray-200 rounded-lg p-4">
                <h4 className="font-medium text-gray-800 mb-3">3. 数据存储层</h4>
                <ul className="text-sm text-gray-600 space-y-1">
                  <li>• <strong>原始数据：</strong> 存储在Data Lake中，保持完整性和可追溯性</li>
                  <li>• <strong>清洗数据：</strong> 存储在PostgreSQL中，支持复杂查询</li>
                  <li>• <strong>聚合数据：</strong> 存储在Redis中，支持高速查询</li>
                  <li>• <strong>历史数据：</strong> 归档到时序数据库（InfluxDB）</li>
                </ul>
                <div className="mt-3 p-3 bg-green-50 rounded-lg">
                  <p className="text-sm text-green-800">
                    <strong>数据分层：</strong> 采用Lambda架构，支持批处理和流处理两种模式
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* 批处理数据流 */}
        <div className="mb-8">
          <h3 className="text-lg font-semibold text-gray-700 mb-4">批处理数据流程</h3>
          <div className="grid md:grid-cols-2 gap-6">
            <div className="border border-gray-200 rounded-lg p-4">
              <h4 className="font-medium text-gray-800 mb-3">每日批处理任务</h4>
              <div className="space-y-2 text-sm">
                <div className="flex items-center">
                  <Clock className="w-4 h-4 text-blue-500 mr-2" />
                  <span>02:00 - 数据备份</span>
                </div>
                <div className="flex items-center">
                  <Clock className="w-4 h-4 text-blue-500 mr-2" />
                  <span>03:00 - 数据清理</span>
                </div>
                <div className="flex items-center">
                  <Clock className="w-4 h-4 text-blue-500 mr-2" />
                  <span>04:00 - 指标计算</span>
                </div>
                <div className="flex items-center">
                  <Clock className="w-4 h-4 text-blue-500 mr-2" />
                  <span>05:00 - 报告生成</span>
                </div>
                <div className="flex items-center">
                  <Clock className="w-4 h-4 text-blue-500 mr-2" />
                  <span>06:00 - 缓存更新</span>
                </div>
              </div>
            </div>
            
            <div className="border border-gray-200 rounded-lg p-4">
              <h4 className="font-medium text-gray-800 mb-3">月度批处理任务</h4>
              <div className="space-y-2 text-sm">
                <div className="flex items-center">
                  <Calendar className="w-4 h-4 text-green-500 mr-2" />
                  <span>月初第1天 - 月度汇总</span>
                </div>
                <div className="flex items-center">
                  <Calendar className="w-4 h-4 text-green-500 mr-2" />
                  <span>月初第2天 - 基准对比</span>
                </div>
                <div className="flex items-center">
                  <Calendar className="w-4 h-4 text-green-500 mr-2" />
                  <span>月初第3天 - 趋势分析</span>
                </div>
                <div className="flex items-center">
                  <Calendar className="w-4 h-4 text-green-500 mr-2" />
                  <span>月初第5天 - 报告推送</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );

  const renderLogic = () => (
    <div className="space-y-8">
      {/* 核心业务逻辑 */}
      <div className="bg-white rounded-lg shadow-sm p-6">
        <h2 className="text-xl font-bold text-gray-800 mb-6">核心业务逻辑</h2>
        
        {/* 碳排放计算逻辑 */}
        <div className="mb-8">
          <h3 className="text-lg font-semibold text-gray-700 mb-4">碳排放计算逻辑</h3>
          
          <div className="space-y-6">
            {/* Scope1计算 */}
            <div className="border border-gray-200 rounded-lg p-4">
              <h4 className="font-medium text-gray-800 mb-3">Scope 1 直接排放计算</h4>
              <div className="space-y-4">
                <div className="bg-gray-50 rounded-lg p-4">
                  <h5 className="text-sm font-medium text-gray-700 mb-2">计算公式：</h5>
                  <code className="text-sm bg-white p-2 rounded border">
                    CO2排放量 = 燃料消耗量 × 燃料热值 × 碳含量 × 氧化率 × 44/12
                  </code>
                </div>
                
                <div className="grid md:grid-cols-2 gap-4">
                  <div>
                    <h5 className="text-sm font-medium text-gray-700 mb-2">输入参数：</h5>
                    <ul className="text-sm text-gray-600 space-y-1">
                      <li>• 燃料类型（天然气、煤炭、汽油等）</li>
                      <li>• 消耗量（立方米、千克、升等）</li>
                      <li>• 消耗时间段</li>
                      <li>• 设备效率参数</li>
                    </ul>
                  </div>
                  <div>
                    <h5 className="text-sm font-medium text-gray-700 mb-2">处理逻辑：</h5>
                    <ol className="text-sm text-gray-600 space-y-1">
                      <li>1. 验证燃料类型有效性</li>
                      <li>2. 查询对应的排放因子</li>
                      <li>3. 单位标准化处理</li>
                      <li>4. 执行排放计算</li>
                      <li>5. 结果验证和存储</li>
                    </ol>
                  </div>
                </div>
                
                <div className="bg-blue-50 rounded-lg p-3">
                  <h5 className="text-sm font-medium text-blue-700 mb-2">代码示例：</h5>
                  <pre className="text-xs bg-white p-2 rounded border overflow-x-auto">
{`@Service
public class Scope1Calculator {
    
    public EmissionResult calculateFuelEmission(FuelConsumption fuel) {
        // 1. 验证输入参数
        validateFuelData(fuel);
        
        // 2. 获取排放因子
        EmissionFactor factor = getEmissionFactor(fuel.getFuelType(), fuel.getRegion());
        
        // 3. 单位转换
        double standardizedAmount = convertToStandardUnit(fuel.getAmount(), fuel.getUnit());
        
        // 4. 计算排放量
        double emission = standardizedAmount * factor.getCo2Factor();
        
        // 5. 返回结果
        return EmissionResult.builder()
            .emissionAmount(emission)
            .unit("tCO2e")
            .confidence(calculateConfidence(fuel, factor))
            .build();
    }
}`}
                  </pre>
                </div>
              </div>
            </div>

            {/* Scope2计算 */}
            <div className="border border-gray-200 rounded-lg p-4">
              <h4 className="font-medium text-gray-800 mb-3">Scope 2 间接排放计算</h4>
              <div className="space-y-4">
                <div className="bg-gray-50 rounded-lg p-4">
                  <h5 className="text-sm font-medium text-gray-700 mb-2">计算方法：</h5>
                  <div className="space-y-2">
                    <div className="flex items-center">
                      <span className="w-2 h-2 bg-blue-500 rounded-full mr-2"></span>
                      <span className="text-sm">基于位置的方法（Location-based）</span>
                    </div>
                    <div className="flex items-center">
                      <span className="w-2 h-2 bg-green-500 rounded-full mr-2"></span>
                      <span className="text-sm">基于市场的方法（Market-based）</span>
                    </div>
                  </div>
                </div>
                
                <div className="grid md:grid-cols-2 gap-4">
                  <div className="bg-blue-50 rounded-lg p-3">
                    <h5 className="text-sm font-medium text-blue-700 mb-2">基于位置的计算：</h5>
                    <code className="text-xs">排放量 = 电力消耗量 × 电网排放因子</code>
                    <p className="text-xs text-blue-600 mt-1">使用国家或地区的平均电网排放因子</p>
                  </div>
                  <div className="bg-green-50 rounded-lg p-3">
                    <h5 className="text-sm font-medium text-green-700 mb-2">基于市场的计算：</h5>
                    <code className="text-xs">排放量 = 电力消耗量 × 供应商特定因子</code>
                    <p className="text-xs text-green-600 mt-1">优先使用可再生能源证书等市场工具</p>
                  </div>
                </div>
                
                <div className="bg-yellow-50 rounded-lg p-3">
                  <h5 className="text-sm font-medium text-yellow-700 mb-2">特殊处理逻辑：</h5>
                  <ul className="text-xs text-yellow-600 space-y-1">
                    <li>• 绿电采购：从总电量中扣除绿电部分</li>
                    <li>• REC证书：按证书有效期进行抵扣</li>
                    <li>• 自发自用：太阳能等自发电不计入Scope2</li>
                    <li>• 储能系统：需要考虑充放电效率</li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* 数据质量评估逻辑 */}
        <div className="mb-8">
          <h3 className="text-lg font-semibold text-gray-700 mb-4">数据质量评估逻辑</h3>
          <div className="border border-gray-200 rounded-lg p-4">
            <h4 className="font-medium text-gray-800 mb-3">质量评分算法</h4>
            <div className="space-y-4">
              <div className="grid md:grid-cols-3 gap-4">
                <div className="bg-blue-50 rounded-lg p-3">
                  <h5 className="text-sm font-medium text-blue-700 mb-2">完整性 (30%)</h5>
                  <ul className="text-xs text-blue-600 space-y-1">
                    <li>• 必填字段完整性</li>
                    <li>• 数据覆盖时间连续性</li>
                    <li>• 关联数据完整性</li>
                  </ul>
                </div>
                <div className="bg-green-50 rounded-lg p-3">
                  <h5 className="text-sm font-medium text-green-700 mb-2">准确性 (40%)</h5>
                  <ul className="text-xs text-green-600 space-y-1">
                    <li>• 数据范围合理性</li>
                    <li>• 历史数据一致性</li>
                    <li>• 交叉验证准确性</li>
                  </ul>
                </div>
                <div className="bg-purple-50 rounded-lg p-3">
                  <h5 className="text-sm font-medium text-purple-700 mb-2">及时性 (30%)</h5>
                  <ul className="text-xs text-purple-600 space-y-1">
                    <li>• 数据更新频率</li>
                    <li>• 数据时效性</li>
                    <li>• 处理延迟时间</li>
                  </ul>
                </div>
              </div>
              
              <div className="bg-gray-50 rounded-lg p-4">
                <h5 className="text-sm font-medium text-gray-700 mb-2">评分计算公式：</h5>
                <code className="text-sm bg-white p-2 rounded border block">
                  质量评分 = (完整性分数 × 0.3) + (准确性分数 × 0.4) + (及时性分数 × 0.3)
                </code>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );

  const renderException = () => (
    <div className="space-y-8">
      {/* 异常处理策略 */}
      <div className="bg-white rounded-lg shadow-sm p-6">
        <h2 className="text-xl font-bold text-gray-800 mb-6">异常处理策略</h2>
        
        {/* 系统异常处理 */}
        <div className="mb-8">
          <h3 className="text-lg font-semibold text-gray-700 mb-4">系统异常处理</h3>
          <div className="space-y-4">
            
            <div className="border border-red-200 rounded-lg p-4">
              <h4 className="font-medium text-red-800 mb-3">数据库异常</h4>
              <div className="space-y-3">
                <div className="bg-red-50 rounded-lg p-3">
                  <h5 className="text-sm font-medium text-red-700 mb-2">连接超时异常</h5>
                  <ul className="text-sm text-red-600 space-y-1">
                    <li>• <strong>检测机制：</strong> 连接池监控，超时时间设置为30秒</li>
                    <li>• <strong>处理策略：</strong> 自动重试3次，每次间隔5秒</li>
                    <li>• <strong>降级方案：</strong> 切换到从库或返回缓存数据</li>
                    <li>• <strong>通知机制：</strong> 钉钉告警，邮件通知运维</li>
                  </ul>
                </div>
                
                <div className="bg-yellow-50 rounded-lg p-3">
                  <h5 className="text-sm font-medium text-yellow-700 mb-2">数据一致性异常</h5>
                  <ul className="text-sm text-yellow-600 space-y-1">
                    <li>• <strong>检测机制：</strong> 定期数据校验任务</li>
                    <li>• <strong>处理策略：</strong> 事务回滚，数据修复</li>
                    <li>• <strong>预防措施：</strong> 分布式事务管理</li>
                    <li>• <strong>监控指标：</strong> 数据一致性检查失败率</li>
                  </ul>
                </div>
              </div>
            </div>

            <div className="border border-orange-200 rounded-lg p-4">
              <h4 className="font-medium text-orange-800 mb-3">外部API异常</h4>
              <div className="space-y-3">
                <div className="bg-orange-50 rounded-lg p-3">
                  <h5 className="text-sm font-medium text-orange-700 mb-2">第三方服务不可用</h5>
                  <ul className="text-sm text-orange-600 space-y-1">
                    <li>• <strong>熔断机制：</strong> 连续失败5次触发熔断</li>
                    <li>• <strong>重试策略：</strong> 指数退避重试，最大重试5次</li>
                    <li>• <strong>兜底方案：</strong> 使用默认数据或历史数据</li>
                    <li>• <strong>恢复检测：</strong> 半开状态探测服务恢复</li>
                  </ul>
                </div>
                
                <div className="bg-blue-50 rounded-lg p-3">
                  <h5 className="text-sm font-medium text-blue-700 mb-2">数据格式异常</h5>
                  <ul className="text-sm text-blue-600 space-y-1">
                    <li>• <strong>数据校验：</strong> JSON Schema验证</li>
                    <li>• <strong>格式转换：</strong> 自动数据格式适配</li>
                    <li>• <strong>错误记录：</strong> 异常数据日志记录</li>
                    <li>• <strong>人工介入：</strong> 复杂异常人工处理</li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* 业务异常处理 */}
        <div className="mb-8">
          <h3 className="text-lg font-semibold text-gray-700 mb-4">业务异常处理</h3>
          <div className="space-y-4">
            
            <div className="border border-purple-200 rounded-lg p-4">
              <h4 className="font-medium text-purple-800 mb-3">数据质量异常</h4>
              <div className="space-y-3">
                <div className="bg-purple-50 rounded-lg p-3">
                  <h5 className="text-sm font-medium text-purple-700 mb-2">异常值检测</h5>
                  <ul className="text-sm text-purple-600 space-y-1">
                    <li>• <strong>统计方法：</strong> 3σ原则，箱线图异常检测</li>
                    <li>• <strong>机器学习：</strong> Isolation Forest算法</li>
                    <li>• <strong>处理策略：</strong> 标记异常，人工确认</li>
                    <li>• <strong>自动修复：</strong> 基于历史数据的插值</li>
                  </ul>
                </div>
                
                <div className="bg-green-50 rounded-lg p-3">
                  <h5 className="text-sm font-medium text-green-700 mb-2">数据缺失处理</h5>
                  <ul className="text-sm text-green-600 space-y-1">
                    <li>• <strong>缺失率检测：</strong> 超过20%触发告警</li>
                    <li>• <strong>填补策略：</strong> 前值填充、线性插值、ML预测</li>
                    <li>• <strong>质量标记：</strong> 填补数据的质量降级</li>
                    <li>• <strong>用户提醒：</strong> 数据缺失通知相关用户</li>
                  </ul>
                </div>
              </div>
            </div>

            <div className="border border-green-200 rounded-lg p-4">
              <h4 className="font-medium text-green-800 mb-3">计算异常处理</h4>
              <div className="space-y-3">
                <div className="bg-green-50 rounded-lg p-3">
                  <h5 className="text-sm font-medium text-green-700 mb-2">排放因子缺失</h5>
                  <ul className="text-sm text-green-600 space-y-1">
                    <li>• <strong>降级策略：</strong> 国家级 → 地区级 → 行业平均</li>
                    <li>• <strong>时间降级：</strong> 最新年份 → 前一年 → 历史平均</li>
                    <li>• <strong>质量标记：</strong> 降级因子的不确定性标记</li>
                    <li>• <strong>持续改进：</strong> 因子缺失统计和补充计划</li>
                  </ul>
                </div>
                
                <div className="bg-yellow-50 rounded-lg p-3">
                  <h5 className="text-sm font-medium text-yellow-700 mb-2">计算结果异常</h5>
                  <ul className="text-sm text-yellow-600 space-y-1">
                    <li>• <strong>合理性检查：</strong> 与历史数据对比</li>
                    <li>• <strong>同行对比：</strong> 行业基准值比较</li>
                    <li>• <strong>人工复核：</strong> 异常结果人工确认</li>
                    <li>• <strong>版本控制：</strong> 计算结果版本管理</li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* 监控告警 */}
        <div>
          <h3 className="text-lg font-semibold text-gray-700 mb-4">监控告警机制</h3>
          <div className="grid md:grid-cols-2 gap-6">
            <div className="border border-gray-200 rounded-lg p-4">
              <h4 className="font-medium text-gray-800 mb-3">系统监控指标</h4>
              <div className="space-y-2">
                <div className="flex items-center justify-between">
                  <span className="text-sm text-gray-600">CPU使用率</span>
                  <span className="px-2 py-1 bg-red-100 text-red-800 rounded text-xs">&gt;80%</span>
                </div>
                <div className="flex items-center justify-between">
                  <span className="text-sm text-gray-600">内存使用率</span>
                  <span className="px-2 py-1 bg-orange-100 text-orange-800 rounded text-xs">&gt;85%</span>
                </div>
                <div className="flex items-center justify-between">
                  <span className="text-sm text-gray-600">响应时间</span>
                  <span className="px-2 py-1 bg-yellow-100 text-yellow-800 rounded text-xs">&gt;2s</span>
                </div>
                <div className="flex items-center justify-between">
                  <span className="text-sm text-gray-600">错误率</span>
                  <span className="px-2 py-1 bg-red-100 text-red-800 rounded text-xs">&gt;1%</span>
                </div>
              </div>
            </div>
            
            <div className="border border-gray-200 rounded-lg p-4">
              <h4 className="font-medium text-gray-800 mb-3">业务监控指标</h4>
              <div className="space-y-2">
                <div className="flex items-center justify-between">
                  <span className="text-sm text-gray-600">数据处理失败率</span>
                  <span className="px-2 py-1 bg-red-100 text-red-800 rounded text-xs">&gt;5%</span>
                </div>
                <div className="flex items-center justify-between">
                  <span className="text-sm text-gray-600">计算任务超时率</span>
                  <span className="px-2 py-1 bg-orange-100 text-orange-800 rounded text-xs">&gt;3%</span>
                </div>
                <div className="flex items-center justify-between">
                  <span className="text-sm text-gray-600">数据质量下降</span>
                  <span className="px-2 py-1 bg-yellow-100 text-yellow-800 rounded text-xs">&lt;10%</span>
                </div>
                <div className="flex items-center justify-between">
                  <span className="text-sm text-gray-600">用户投诉数</span>
                  <span className="px-2 py-1 bg-red-100 text-red-800 rounded text-xs">&gt;5/天</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );

  const renderTesting = () => (
    <div className="space-y-8">
      {/* 测试策略 */}
      <div className="bg-white rounded-lg shadow-sm p-6">
        <h2 className="text-xl font-bold text-gray-800 mb-6">测试策略</h2>
        
        {/* 测试金字塔 */}
        <div className="mb-8">
          <h3 className="text-lg font-semibold text-gray-700 mb-4">测试金字塔</h3>
          <div className="space-y-4">
            <div className="border border-green-200 rounded-lg p-4 bg-green-50">
              <h4 className="font-medium text-green-800 mb-3">单元测试 (70%)</h4>
              <div className="grid md:grid-cols-2 gap-4">
                <div>
                  <h5 className="text-sm font-medium text-green-700 mb-2">覆盖范围：</h5>
                  <ul className="text-sm text-green-600 space-y-1">
                    <li>• 业务逻辑方法</li>
                    <li>• 数据处理算法</li>
                    <li>• 工具类方法</li>
                    <li>• 异常处理逻辑</li>
                  </ul>
                </div>
                <div>
                  <h5 className="text-sm font-medium text-green-700 mb-2">质量要求：</h5>
                  <ul className="text-sm text-green-600 space-y-1">
                    <li>• 代码覆盖率 &gt; 80%</li>
                    <li>• 分支覆盖率 &gt; 70%</li>
                    <li>• 执行时间 &lt; 10ms</li>
                    <li>• 无外部依赖</li>
                  </ul>
                </div>
              </div>
            </div>
            
            <div className="border border-blue-200 rounded-lg p-4 bg-blue-50">
              <h4 className="font-medium text-blue-800 mb-3">集成测试 (20%)</h4>
              <div className="grid md:grid-cols-2 gap-4">
                <div>
                  <h5 className="text-sm font-medium text-blue-700 mb-2">测试场景：</h5>
                  <ul className="text-sm text-blue-600 space-y-1">
                    <li>• 数据库操作</li>
                    <li>• 外部API调用</li>
                    <li>• 消息队列处理</li>
                    <li>• 缓存操作</li>
                  </ul>
                </div>
                <div>
                  <h5 className="text-sm font-medium text-blue-700 mb-2">测试环境：</h5>
                  <ul className="text-sm text-blue-600 space-y-1">
                    <li>• Docker容器环境</li>
                    <li>• 测试数据库</li>
                    <li>• Mock外部服务</li>
                    <li>• 测试消息队列</li>
                  </ul>
                </div>
              </div>
            </div>
            
            <div className="border border-purple-200 rounded-lg p-4 bg-purple-50">
              <h4 className="font-medium text-purple-800 mb-3">端到端测试 (10%)</h4>
              <div className="grid md:grid-cols-2 gap-4">
                <div>
                  <h5 className="text-sm font-medium text-purple-700 mb-2">关键路径：</h5>
                  <ul className="text-sm text-purple-600 space-y-1">
                    <li>• 用户注册登录</li>
                    <li>• 数据导入计算</li>
                    <li>• 报告生成下载</li>
                    <li>• 供应商协作</li>
                  </ul>
                </div>
                <div>
                  <h5 className="text-sm font-medium text-purple-700 mb-2">自动化工具：</h5>
                  <ul className="text-sm text-purple-600 space-y-1">
                    <li>• Selenium WebDriver</li>
                    <li>• Playwright</li>
                    <li>• Postman/Newman</li>
                    <li>• K6性能测试</li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* 测试用例示例 */}
        <div className="mb-8">
          <h3 className="text-lg font-semibold text-gray-700 mb-4">核心测试用例</h3>
          
          <div className="space-y-4">
            <div className="border border-gray-200 rounded-lg p-4">
              <h4 className="font-medium text-gray-800 mb-3">碳排放计算测试</h4>
              <div className="bg-gray-50 rounded-lg p-4">
                <h5 className="text-sm font-medium text-gray-700 mb-2">测试用例：Scope1天然气排放计算</h5>
                <div className="space-y-3">
                  <div>
                    <h6 className="text-xs font-medium text-gray-600 mb-1">测试数据：</h6>
                    <pre className="text-xs bg-white p-2 rounded border">
{`{
  "fuel_type": "NATURAL_GAS",
  "amount": 1000,
  "unit": "m3",
  "region": "CN",
  "period": "2024-01"
}`}
                    </pre>
                  </div>
                  <div>
                    <h6 className="text-xs font-medium text-gray-600 mb-1">预期结果：</h6>
                    <pre className="text-xs bg-white p-2 rounded border">
{`{
  "co2_emission": 1.96,
  "unit": "tCO2e",
  "confidence": 95,
  "calculation_method": "IPCC_2006"
}`}
                    </pre>
                  </div>
                  <div>
                    <h6 className="text-xs font-medium text-gray-600 mb-1">测试步骤：</h6>
                    <ol className="text-xs text-gray-600 space-y-1">
                      <li>1. 准备测试数据</li>
                      <li>2. 调用计算接口</li>
                      <li>3. 验证计算结果</li>
                      <li>4. 检查数据存储</li>
                      <li>5. 验证质量评分</li>
                    </ol>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* 性能测试 */}
        <div>
          <h3 className="text-lg font-semibold text-gray-700 mb-4">性能测试</h3>
          <div className="grid md:grid-cols-2 gap-6">
            <div className="border border-gray-200 rounded-lg p-4">
              <h4 className="font-medium text-gray-800 mb-3">负载测试指标</h4>
              <div className="space-y-2">
                <div className="flex items-center justify-between">
                  <span className="text-sm text-gray-600">并发用户数</span>
                  <span className="px-2 py-1 bg-blue-100 text-blue-800 rounded text-xs">1000</span>
                </div>
                <div className="flex items-center justify-between">
                  <span className="text-sm text-gray-600">响应时间</span>
                  <span className="px-2 py-1 bg-green-100 text-green-800 rounded text-xs">&lt; 2s</span>
                </div>
                <div className="flex items-center justify-between">
                  <span className="text-sm text-gray-600">吞吐量</span>
                  <span className="px-2 py-1 bg-purple-100 text-purple-800 rounded text-xs">500 TPS</span>
                </div>
                <div className="flex items-center justify-between">
                  <span className="text-sm text-gray-600">错误率</span>
                  <span className="px-2 py-1 bg-red-100 text-red-800 rounded text-xs">&lt; 0.1%</span>
                </div>
              </div>
            </div>
            
            <div className="border border-gray-200 rounded-lg p-4">
              <h4 className="font-medium text-gray-800 mb-3">压力测试场景</h4>
              <div className="space-y-2">
                <div className="flex items-center justify-between">
                  <span className="text-sm text-gray-600">数据导入</span>
                  <span className="px-2 py-1 bg-yellow-100 text-yellow-800 rounded text-xs">10w条/分钟</span>
                </div>
                <div className="flex items-center justify-between">
                  <span className="text-sm text-gray-600">批量计算</span>
                  <span className="px-2 py-1 bg-orange-100 text-orange-800 rounded text-xs">1000企业/小时</span>
                </div>
                <div className="flex items-center justify-between">
                  <span className="text-sm text-gray-600">报告生成</span>
                  <span className="px-2 py-1 bg-green-100 text-green-800 rounded text-xs">100份/分钟</span>
                </div>
                <div className="flex items-center justify-between">
                  <span className="text-sm text-gray-600">并发查询</span>
                  <span className="px-2 py-1 bg-blue-100 text-blue-800 rounded text-xs">2000 QPS</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );

  const renderDeployment = () => (
    <div className="space-y-8">
      {/* 部署架构 */}
      <div className="bg-white rounded-lg shadow-sm p-6">
        <h2 className="text-xl font-bold text-gray-800 mb-6">部署与运维</h2>
        
        {/* 容器化部署 */}
        <div className="mb-8">
          <h3 className="text-lg font-semibold text-gray-700 mb-4">容器化部署</h3>
          <div className="space-y-4">
            <div className="border border-gray-200 rounded-lg p-4">
              <h4 className="font-medium text-gray-800 mb-3">Docker配置</h4>
              <div className="space-y-3">
                <div className="bg-gray-50 rounded-lg p-3">
                  <h5 className="text-sm font-medium text-gray-700 mb-2">基础镜像选择：</h5>
                  <ul className="text-sm text-gray-600 space-y-1">
                    <li>• <strong>Java应用：</strong> openjdk:17-jre-slim</li>
                    <li>• <strong>Node.js应用：</strong> node:18-alpine</li>
                    <li>• <strong>Python应用：</strong> python:3.9-slim</li>
                    <li>• <strong>Nginx：</strong> nginx:1.21-alpine</li>
                  </ul>
                </div>
                
                <div className="bg-blue-50 rounded-lg p-3">
                  <h5 className="text-sm font-medium text-blue-700 mb-2">Dockerfile优化：</h5>
                  <ul className="text-sm text-blue-600 space-y-1">
                    <li>• 多阶段构建减少镜像体积</li>
                    <li>• 分层缓存优化构建速度</li>
                    <li>• 非root用户运行容器</li>
                    <li>• 健康检查和优雅停机</li>
                  </ul>
                </div>
              </div>
            </div>
            
            <div className="border border-gray-200 rounded-lg p-4">
              <h4 className="font-medium text-gray-800 mb-3">Kubernetes部署</h4>
              <div className="grid md:grid-cols-2 gap-4">
                <div>
                  <h5 className="text-sm font-medium text-gray-700 mb-2">资源配置：</h5>
                  <div className="space-y-2 text-sm">
                    <div className="bg-gray-50 p-2 rounded">
                      <code>CPU: 500m - 2000m</code>
                    </div>
                    <div className="bg-gray-50 p-2 rounded">
                      <code>Memory: 512Mi - 4Gi</code>
                    </div>
                    <div className="bg-gray-50 p-2 rounded">
                      <code>Replicas: 3 - 10</code>
                    </div>
                  </div>
                </div>
                <div>
                  <h5 className="text-sm font-medium text-gray-700 mb-2">部署策略：</h5>
                  <ul className="text-sm text-gray-600 space-y-1">
                    <li>• 滚动更新</li>
                    <li>• 蓝绿部署</li>
                    <li>• 金丝雀发布</li>
                    <li>• 自动扩缩容</li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* 监控运维 */}
        <div className="mb-8">
          <h3 className="text-lg font-semibold text-gray-700 mb-4">监控运维</h3>
          <div className="space-y-4">
            <div className="border border-gray-200 rounded-lg p-4">
              <h4 className="font-medium text-gray-800 mb-3">监控体系</h4>
              <div className="grid md:grid-cols-3 gap-4">
                <div className="bg-blue-50 rounded-lg p-3">
                  <h5 className="text-sm font-medium text-blue-700 mb-2">基础监控</h5>
                  <ul className="text-sm text-blue-600 space-y-1">
                    <li>• CPU/内存/磁盘</li>
                    <li>• 网络流量</li>
                    <li>• 容器状态</li>
                    <li>• 节点健康</li>
                  </ul>
                </div>
                <div className="bg-green-50 rounded-lg p-3">
                  <h5 className="text-sm font-medium text-green-700 mb-2">应用监控</h5>
                  <ul className="text-sm text-green-600 space-y-1">
                    <li>• 接口响应时间</li>
                    <li>• 错误率统计</li>
                    <li>• 并发用户数</li>
                    <li>• 业务指标</li>
                  </ul>
                </div>
                <div className="bg-purple-50 rounded-lg p-3">
                  <h5 className="text-sm font-medium text-purple-700 mb-2">业务监控</h5>
                  <ul className="text-sm text-purple-600 space-y-1">
                    <li>• 数据处理量</li>
                    <li>• 计算任务状态</li>
                    <li>• 用户行为</li>
                    <li>• 业务异常</li>
                  </ul>
                </div>
              </div>
            </div>
            
            <div className="border border-gray-200 rounded-lg p-4">
              <h4 className="font-medium text-gray-800 mb-3">日志管理</h4>
              <div className="space-y-3">
                <div className="bg-gray-50 rounded-lg p-3">
                  <h5 className="text-sm font-medium text-gray-700 mb-2">日志分类：</h5>
                  <div className="grid md:grid-cols-2 gap-4">
                    <div>
                      <ul className="text-sm text-gray-600 space-y-1">
                        <li>• <strong>访问日志：</strong> Nginx/API Gateway</li>
                        <li>• <strong>应用日志：</strong> 业务逻辑处理</li>
                        <li>• <strong>错误日志：</strong> 异常和错误信息</li>
                      </ul>
                    </div>
                    <div>
                      <ul className="text-sm text-gray-600 space-y-1">
                        <li>• <strong>审计日志：</strong> 用户操作记录</li>
                        <li>• <strong>系统日志：</strong> 系统运行状态</li>
                        <li>• <strong>性能日志：</strong> 响应时间等</li>
                      </ul>
                    </div>
                  </div>
                </div>
                
                <div className="bg-yellow-50 rounded-lg p-3">
                  <h5 className="text-sm font-medium text-yellow-700 mb-2">ELK Stack配置：</h5>
                  <ul className="text-sm text-yellow-600 space-y-1">
                    <li>• <strong>Elasticsearch：</strong> 日志存储和检索</li>
                    <li>• <strong>Logstash：</strong> 日志收集和处理</li>
                    <li>• <strong>Kibana：</strong> 日志可视化分析</li>
                    <li>• <strong>Filebeat：</strong> 日志文件采集</li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* 运维流程 */}
        <div>
          <h3 className="text-lg font-semibold text-gray-700 mb-4">运维流程</h3>
          <div className="space-y-4">
            <div className="border border-gray-200 rounded-lg p-4">
              <h4 className="font-medium text-gray-800 mb-3">发布流程</h4>
              <div className="space-y-3">
                <div className="flex items-center space-x-4">
                  <div className="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center">
                    <span className="text-blue-600 font-semibold text-sm">1</span>
                  </div>
                  <div>
                    <h5 className="text-sm font-medium text-gray-700">代码提交</h5>
                    <p className="text-xs text-gray-600">开发完成后提交代码到Git仓库</p>
                  </div>
                </div>
                <div className="flex items-center space-x-4">
                  <div className="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center">
                    <span className="text-green-600 font-semibold text-sm">2</span>
                  </div>
                  <div>
                    <h5 className="text-sm font-medium text-gray-700">自动化测试</h5>
                    <p className="text-xs text-gray-600">CI/CD流水线自动执行测试</p>
                  </div>
                </div>
                <div className="flex items-center space-x-4">
                  <div className="w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center">
                    <span className="text-purple-600 font-semibold text-sm">3</span>
                  </div>
                  <div>
                    <h5 className="text-sm font-medium text-gray-700">构建镜像</h5>
                    <p className="text-xs text-gray-600">构建Docker镜像并推送到仓库</p>
                  </div>
                </div>
                <div className="flex items-center space-x-4">
                  <div className="w-8 h-8 bg-orange-100 rounded-full flex items-center justify-center">
                    <span className="text-orange-600 font-semibold text-sm">4</span>
                  </div>
                  <div>
                    <h5 className="text-sm font-medium text-gray-700">部署发布</h5>
                    <p className="text-xs text-gray-600">部署到K8s集群并执行健康检查</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );

  const renderActiveTab = () => {
    switch (activeTab) {
      case 'architecture': return renderArchitecture();
      case 'api': return renderAPI();
      case 'dataflow': return renderDataFlow();
      case 'logic': return renderLogic();
      case 'exception': return renderException();
      case 'testing': return renderTesting();
      case 'deployment': return renderDeployment();
      default: return renderArchitecture();
    }
  };

  return (
    <div className="w-full min-h-screen bg-gray-50">
      {/* 头部 */}
      <div className="bg-white shadow-sm">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="py-6">
            <h1 className="text-2xl font-bold text-gray-900">
              ESG平台研发指导手册
            </h1>
            <p className="mt-2 text-gray-600">
              详细的技术实现、业务逻辑、异常处理和运维指导
            </p>
          </div>
        </div>
      </div>

      {/* 导航标签 */}
      <div className="bg-white border-b border-gray-200 sticky top-0 z-10">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex space-x-6 overflow-x-auto">
            {tabs.map((tab) => {
              const Icon = tab.icon;
              return (
                <button
                  key={tab.id}
                  onClick={() => setActiveTab(tab.id)}
                  className={`flex-shrink-0 inline-flex items-center px-3 py-4 border-b-2 text-sm font-medium ${
                    activeTab === tab.id
                      ? 'border-blue-500 text-blue-600'
                      : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
                  }`}
                >
                  <Icon className="w-4 h-4 mr-2" />
                  {tab.name}
                </button>
              );
            })}
          </div>
        </div>
      </div>

      {/* 内容区域 */}
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        {renderActiveTab()}
      </div>
    </div>
  );
} 